import React, { useState, useRef, useEffect } from 'react';
import { EdrmsHotWordStyled } from './style';
import { EdrmsTypeAndStorageDto } from '@/services/types';

import { getEdrmsHotSearchWord } from '@/services/index'

import * as echarts from 'echarts/core';
import 'echarts-wordcloud';
type EdrmsHotWordPropsType = {}

const EdrmsUseReport: React.FC<EdrmsHotWordPropsType> = () => {
    const chartRef = useRef(null);
    const [hotWprd, setHotWord] = useState<any[]>()

    useEffect(() => {
        getEdrmsHotSearchWord().then(res => {
            if(res) {
                setHotWord(res);
                console.log(res);
            }
        });

    }, [])
    const option = {
        series: [{
            type: 'wordCloud',
            shape: 'circle',
            keepAspect: false,
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            width: '100%',
            height: '90%',
            right: null,
            bottom: null,
            sizeRange: [12, 60],
            rotationRange: [0, 0],
            rotationStep: 45,
            gridSize: 8,
            drawOutOfBound: false,
            layoutAnimation: true,
            textStyle: {
                fontFamily: 'sans-serif',
                fontWeight: 'bold',
                border: '1px solid #ddd',
                color: function () {
                    // return "#fff";
                    return 'rgb(' + [
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160),
                        Math.round(Math.random() * 160)
                    ].join(',') + ')';
                }
            },
            emphasis: {
                // focus: 'self',
                textStyle: {
                    textShadowBlur: 3,
                    textShadowColor: '#333'
                }
            },
            //data属性中的value值却大，权重就却大，展示字体就却大
            data: (hotWprd || []).slice(0,10).map((item, index) => { return { name: item.name.slice(0,4), value: item.number * 1000 }; })


        }]

    }
    useEffect(() => {
        let chart: any = null;
        if (chartRef.current) {
            // 创建一个echarts实例，返回echarts实例。不能在单个容器中创建多个echarts实例
            chart = echarts.init(chartRef.current);
            // 设置图表实例的配置项和数据
            option && chart.setOption(option);
        }
        return () => {

            //  销毁实例。实例销毁后无法再被使用
            chart.dispose();
        };
    }, [hotWprd])
    return (
        <EdrmsHotWordStyled>
            <div ref={chartRef} style={{ width: '100%', height: '100%' }}>
            </div>

        </EdrmsHotWordStyled>
    );
};

export default EdrmsUseReport;
